<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>分类</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/layout.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_c2fouqhk6na5rk9.css">
    <style>
        .car-btn {
            position: absolute !important;
            right: 10px;
            line-height: 22px !important;
        }

        .title {
            margin-left: 0;
        }

        #menu-list-group ul {
            height: 100%;
        }

        .content {
            padding-bottom: 2.5rem;
        }

        .sub-box {
            z-index: 10;
            display: none;
            position: absolute;
            width: 77%;
            background: #f2f2f2;
            padding: 15px 0 10px 0;
            font-size: 0;
            text-align: left;
        }

        .sub-box a {
            display: inline-block;
            padding: 5px;
            background: #fff;
            font-size: 12px;
            margin-left: 10px;
            margin-bottom: 5px;
        }

        .active {
            background: #F2F2F2;
        }

        #nav-col-20 {
            box-shadow: 2px 2px 2px #ddd;
            width: 20%;
            position: fixed;
            top: 45px;
            height: 100%;
        }

        .content-padded .row .col-80 {
            float: right;
            margin: 0;
            width: 77%;
        }

        .zero-tip {
            display: none;
            position: absolute;
            left: 58%;
            margin: 14rem 0 0 0;
            font-size: 14px;
            transform: translate(-42%, -42%);
            -webkit-transform: translate(-42%, -42%);
            color: #999;
        }

        .cart-bg {
            display: none;
            position: absolute;
            left: 58%;
            margin: 10rem 0 0 0;
            transform: translate(-42%, -42%);
            -webkit-transform: translate(-42%, -42%);
            width: 6rem;
            height: 6rem;
        }
        .badge {
            position: absolute;
            left: 40%;
            z-index: 100;
            padding: 0 .2rem;
            color: white;
            vertical-align: top;
            background: red;
            border-radius: .5rem;
            margin-left: .1rem;
            height: .7rem;
            min-width: .7rem;
            line-height: .7rem;
            font-size: 12px;
            -webkit-transform: scale(0.84, 0.84);
        }
        #car-badge{
            margin-right: 1rem;
        }
    </style>
</head>

<body>
<div class="page-group">
    <div class="page">
        <!--搜索栏内容 !-->
        <header class="bar bar-nav" >
            <a class="icon icon-left pull-left" href="${basepath}/front/catalog/toMallList">返回</a>

            <h1 class="title" id="catalog">
                商城

            </h1>
            <a class="car-btn iconfont icon-shangcheng pull-right" id="car-badge"></a>

        </header>
        <!--内容中心部分!-->
        <img src="${staticpath}/images/catalog-zero-bg.png" alt="商品" class="cart-bg"/>

        <p class="zero-tip">商品还未上架哦！</p>

        <div class="content class-branch-content">
            <div class="content-padded grid-demo">
                <div class="row">
                    <div class="col-20" id="nav-col-20">
                        <div class="list-block contacts-block">
                            <div class="list-group" id="menu-list-group">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-80" id="main-col-80">

                    </div>
                </div>
            </div>
        </div>
        <!--工具栏!-->
        <nav class="bar bar-tab" id="tool-bar">
            <a class="tab-item external " href="/toHome">
                <span class="iconfont icon-shouye"></span>

                <p class="tab-label">首页</p>
            </a>
            <a class=" tab-item love-external" href="${basepath}/front/offline/toOfflineList" id="loveBtn">
                <span class="iconfont icon-huodong"></span>

                <p class="tab-label">活动</p>
            </a>
            <a class="tab-item external active" href="${basepath}/front/catalog/toMallList">
                <span class="iconfont iconfont icon-shangcheng"></span>

                <p class="tab-label">商城</p>
            </a>
            <a class="tab-item external" href="${basepath}/front/account/toAccountList">
                <span class="iconfont icon-wo"></span>

                <p class="tab-label">我</p>
            </a>
        </nav>
    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script>
    $.config = {
        router: false
    }
</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script type="text/javascript" src="${staticpath}/front/dist/js/catalog/catalogList.js"></script>
<script>
    $.init();
</script>
</body>

</html>
